<template>
	<view class="pagebox flex-column" @click="obj.showMod=false">
		<template>
			<navtop></navtop>
			<view class="bg" @click="$c.go_url('/pages/login')"></view>
			
			<view :class="['bottombox',obj.inputBottom>0?'':'inputBottom']" :style="{bottom: `${obj.inputBottom}px`,'padding-bottom': `${obj.inputBottom>0?10:obj.safeAreaBottom||10}px`}" @click.stop="()=>{}">
				<view class="chartbox flex-row-center">
					<!-- <view class="voicebox flex-center">
						<image class="voiceicon" src="../../static/5.png" mode="aspectFill"></image>
					</view> -->
					<view class="inputbox flex-row-center">
						<input type="text" v-model="obj.chatMsg" :disabled="obj.isChartEnd==0" :adjust-position="false" placeholder="请在此输入您要提问的内容" @keyboardheightchange="keyboardheightchange" />
						<view class="addiconbox flex-center" @click="showMod">
							<image class="addicon" src="../../static/6.png" mode="aspectFill"></image>
						</view>
					</view>
					<view v-if="obj.chatMsg" class="send" @click="sendInut(obj.chatMsg)">发送</view>
				</view>
				<template v-if="obj.showMod">
					<!-- <view class="desc">内容由大模型生成，不能完全保障真实</view> -->
					<view class="modbox flex-row wrap mt30">
						<view class="mod flex-column-center" v-for="(v,i) in obj.mods" :key="i" @click="selectMod(v)">
							<view class="item flex-center"><image class="" :src="`../../static/${v.icon}.png`" mode="widthFix"></image></view>
							<text class="name">{{v.name}}</text>
						</view>
					</view>
				</template>
			</view>
		</template>
		
		<template>
			<view :style="{height:`${obj.wh.navHeight+10}px`,width: '100vw'}"></view>
			<template>
				<!-- 小丝 -->
				<template v-if="!obj.messages.length">
					<view class="lefthead">
						<image class="head" src="../../static/logo.png" mode="aspectFill"></image>
					</view>
					<view class="xiaosi_chart">
						<view class="title">HI，欢迎来到{{obj.mod.name}}中心！</view>
						<text class="desc">{{obj.mod.desc}}</text>
					</view>
				</template>
				<template v-for="(item,index) in obj.messages" :key="i">
					<view class="flex-row ju-between al-flex-start" v-if="item.role=='user'">
						<view class="problem_chart">{{item.content||''}}</view>
						<image class="edit ml20" src="../../static/25.png" mode="widthFix" @click="obj.chatMsg=item.content||''"></image>
					</view>
					<view class="answer_chart flex-column" v-if="item.role=='assistant'">
						<zero-markdown-view :markdown="item.content||''"></zero-markdown-view>
						<view class="recommends flex-column" v-if="item.recommends">
							<view class="recommendDesc" v-if="obj.mod.type==2">{{obj.mod.recommendDesc}}</view>
							<!--  这里暂时不要展示热门推荐问题 特别要求的（2024年11月19号上午要求的） -->
							<!-- <template v-if="obj.mod.type==1"> -->
							<!--  这里暂时不要展示企业知识库的推荐问题 特别要求的（2024年11月18号下午要求的） -->
							<!-- <template v-if="obj.mod.type!=2"> -->
								<!-- <view class="name mt10" v-for="(v,i) in item.recommends" :key="i" @click="changeRecommend(v)">{{v.name}}</view> -->
							<!-- </template> -->
							<template v-if="obj.mod.type==2&&item.recommends.products&&item.recommends.products.length">
								<view class="proitem pd10 flex-row-center mt20" v-for="(v,i) in item.recommends.products" :key="i" @click="changeRecommend(v)">
									<view class="cover mr20"> <image :src="v.imgs.cover" mode="aspectFill"></image> </view>
									<view class="flex-column flex1 mr20">
										<view class="title lineOne m210">{{v.title}}</view>
										<view class="prodesc">
											<text class="min_price mr10">¥{{v.min_price}}</text>
											<text class="minidesc">元/{{v.unit}}</text>
										</view>
									</view>
									<view class="readbtn flex-center">查看</view>
								</view>
							</template>
							<view v-if="obj.mod.type==2" class="w100 flex-center base-color f28 mt30" @click="proxy.$c.go_url('/pages/proSup/proSup')">更多产品</view>
						</view>
						<!-- <view v-if="item.recommends" class="desc">内容由大模型生成，不能完全保障真实</view> -->
					</view>
				</template>
				<template v-if="obj.isChartEnd!==0">
					<view class="recommend">
						<view class="flex-row-center ju-between">
							<text class="re-label">猜你想问</text>
							<image v-if="obj.problems.length>0" class="refresh" src="../../static/24.png" mode="aspectFill" @click="refreshProblem"></image>
						</view>
						<view class="problem" v-for="(v,i) in obj.problems" :key="i" @click="sendRecommend(v)">{{v.title}}</view>
						<view v-if="!obj.problems.length" class="nodata">暂无推荐</view>
					</view>
				</template>
			</template>
			<view id="bottom_space" :style="{height:`140rpx`,width: '100vw'}"></view>
		</template>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch } from 'vue'
	import { onLoad,onShow,onUnload,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';

    let { proxy } = getCurrentInstance()
	let obj = reactive({
		wh: proxy.$c.getglobal(),
		mods: [
			{
				name: '问答',
				icon: '20',
				url: '',
				type: 1,
				desc: 'Hi，欢迎来到问答中心。您有任何丝网行业相关的问题都可以问我！',
				chartrecommend: '',
				recommend: '请向我推荐三条热门问题，请返回知识库中的随机三列，其他均不要，以清晰的 JSON 格式呈现，JSON字段分别为id和name，且内容必须为中文',
				recommendDesc: '关于丝网问题，大家最热门的问题如下：',
			},
			{
				name: '产品',
				icon: '12',
				url: '',
				type: 2,
				desc: 'Hi，欢迎来到产品中心。告诉我你想要的产品规格或是应用场景，我来帮您推荐源头的厂家及最适合的产品！',
				chartrecommend: '',
				recommend: '请向我推荐三条丝网产品，请返回知识库中的随机三列，其他均不要，以清晰的 JSON 格式呈现，JSON字段分别为id、size_id和name，且内容必须为中文，且所有字段必须取产品库的真实数据',
				recommendDesc: '根据目前的产品清单，帮你推荐如下产品：',
			},
			// {name: '身份认证', icon: '22', url: '/pages/authentication' },
			{
				name: '知企',
				icon: '11',
				url: '',
				type: 3,
				desc: 'Hi，欢迎来到知企中心。您有任何公司财务、人事、行政等综合事务问题都可以问我！',
				chartrecommend: '如果是从知识库文档里里获取的答案，请务必在末尾给出来源文档，并用“《》”括起来。',
				recommend: '请向我推荐基础企业知识库里的相关问题，并返回知识库中的随机三列，其他均不要，以清晰的 JSON 格式呈现，JSON字段分别为id和name，且内容必须为中文'
			},
			{
				name: '报价',
				icon: '19',
				url: '',
			},
		],
		mod: {name: '咨询中心', url: '', type: 1, desc: 'Hi，欢迎来到咨询中心。您有任何丝网行业相关的问题都可以问我！' },
		chatMsg: '',
		showMod: false,
		proReq: {
			type: 0,
			currentpage: 1,
			pagesize: 3
		},
		problems: [],
		messages: [],
		recommends: null,
		isChartEnd: -1,//-1初始化 0聊天中 1聊天成功 2聊天失败
		u: null,
		inputBottom: 0,
		safeAreaBottom: 0
	})
	
	onMounted(()=>{
		login()
		obj.mod = obj.mods[0]
		getproblem()
	})
	
	watch(
		()=>obj.u,
		(val,old)=>{
			if(val&&[-1,2].includes(val.verify)&&JSON.stringify(old)!=JSON.stringify(val)){
				uni.showModal({
					title: '温馨提示',
					content: val.verify==2?`您提交的身份认证的申请被拒绝，是否重新去申请？`:'您的身份还未认证，是否去申请？',
					success: (res)=>{
						if(res.confirm){
							proxy.$c.go_url('/pages/authentication');
						}
					}
				});
			}
		},{deep:true}
	)
	
	onLoad(async(opt)=>{
		obj.u = await getuser()
		if(opt.chatMsg){
			setchart({title:opt.chatMsg},'chart')
		}
		if(opt.chat_id){
			getHistory(opt.chat_id)
		}
		// #ifdef MP-WEIXIN
		uni.onKeyboardHeightChange(res => {
			obj.showMod = false
			obj.inputBottom = res.height
		})
		// #endif
		uni.getSystemInfo({
			success:(res)=>{
				obj.safeAreaBottom = res.safeAreaInsets.bottom
			}
		});
	})
	
	onShow(async()=>{
		obj.u = await getuser()
	})
	
	onUnload(()=>{
	})
	
	const login=()=>{
		if(proxy.$c.getOpenid()){
			proxy.$reQuest.post('mp/login',{openid:proxy.$c.getOpenid()},{token: false},).then(async(res)=>{
				if(res.success){
					proxy.$c.setToken(res.msg.token);
					let user_ = proxy.$c.getUser()?JSON.parse(proxy.$c.getUser()):{};
					const user = {
						...user_,
						...res.msg,
					}
					proxy.$c.setUser(JSON.stringify(user));
					obj.u = await getuser()
				}
			}).catch(err=>{})	
		}
	}
	
	const getuser=()=>{
		return new Promise((resovle,rej)=>{
			proxy.$reQuest.post('mp/user/get',{},{token: true,noOut:true},).then(d=>{
				let msg = d.msg||{}
				msg = {
					...msg,
					verify: 1,
					company_id: 1
				}
				resovle(msg)
			}).catch(err=>{resovle({})})
		})
	}
	
	const getHistory=(chat_id)=>{
		proxy.$reQuest.post('mp/user/chat/get',{chat_id:chat_id},{token: true},).then(res=>{
			if(res.success){
				let msg = res.msg||{}
				obj.mod = obj.mods.find(e=>e.type===msg.type)
				obj.messages = res.msg.messages||[]
				setTimeout(()=>{
					uni.pageScrollTo({selector: '#bottom_space'})
				}, 30);
			}
		}).catch(err=>{uni.hideLoading()})
	}
	
	const selectMod=(v)=>{
		obj.showMod = false
		if(v.url){
			proxy.$c.go_url(v.url)
			// addchat()
		}else if(v.name=='报价'){
			uni.showToast({title: '功能开发中！',icon: 'none'})
		}else{
			if(obj.mod.name==v.name){
				return
			}
			if(v.type!==3||(v.type==3&&obj.u&&obj.u.company_id==1)){
				obj.messages = []
				obj.mod = v
				obj.proReq.type = v.type-1
				obj.proReq.currentpage = 1
				getproblem()
				// addchat()
			}else{
				if(v.type==3&&obj.u){
					if(obj.u.type_user==1){
						uni.showToast({title: '您还不是企业身份！',icon: 'none'})
					}else if(obj.u.company_id>1){
						uni.showToast({title: '该功能暂未向您的企业开放！',icon: 'none'})
					}else{
						if(obj.u.type_user){
							uni.showToast({title: '该功能暂未开放！',icon: 'none'})
						}else{
							uni.showToast({title: '请先申企请业身份！',icon: 'none'})
						}
					}
				}
			}
		}
	}
	
	const showMod=()=>{
		if(obj.isChartEnd==0){
			return
		}
		obj.showMod=!obj.showMod
	}
	
	const getproblem=()=>{
		proxy.$reQuest.post('mp/problem/list',obj.proReq,{token: true,noOut:true},).then(res=>{
			if(res.success){
				obj.problems = res.msg.list||[]
				obj.proCount = res.msg.count||0
			}else{
				obj.problems = []
			}
		}).catch(err=>{obj.problems = []})
	}
	
	const refreshProblem=()=>{
		if(obj.proCount>obj.proReq.currentpage*obj.proReq.pagesize){
			obj.proReq.currentpage++
		}else{
			obj.proReq.currentpage = 1
		}
		getproblem()
	}
	
	const getproduct=(product_id)=>{
		return new Promise((resovle,rej)=>{
			proxy.$reQuest.post('mp/product/get',{product_id:product_id},{token: true},).then(d=>{
				if(d.success){
					resovle({
						...d.msg||{},
						product_id: product_id,
						id: product_id
					})	
				}else{resovle(null)}
			}).catch(err=>{resovle(null)})
		})
	}
	
	
	const getChartObj_java=async(question)=>{
		return new Promise((resolve, reject) => {
		    uni.request({
				url: 'https://silkscreen.server.zhhost.top/mp/chat',//后端java调用
		        method: "POST", // 你的请求方法
		        data: {
					messages:JSON.stringify([{
						"role": "user",
						"content": question
					}]),
					type:obj.mod.type,
				},
		        header: {
		            "Content-Type": "application/json;charset=UTF-8;",
		    		"token": proxy.$c.getToken()
		        },
		    	dataType: 'json',
		        enableChunked: false, // 开启流传输
		        success: async(res) => {
					console.log('res1',res);
					if(res.statusCode==200){
						if(res.data&&!res.data.err){
							const str = `[${res.data.slice(0, -1)}]`
							const d = JSON.parse(str)
							let objstr  = ''
							objstr += d.map(t => t.content).join('')
							if(objstr.indexOf("```json")!=-1){
								const objstr_ = objstr.match(/(?<=```json)([\s\S]*?)(?=```)/g)
								let arr = JSON.parse(objstr_[0])||[]
								console.log('arr',arr);
								if(obj.mod.type==2){
									let products = []
									for (let i = 0; i < arr.length; i++) {
										const o = arr[i]
										const p = await getproduct(o.id||o.product_id)
										if(p){
											products.push(p)	
										}
									}
									resolve({
										products: products||[],
										recommends: arr||[]
									})
								}else{
									resolve(arr)
								}
							}else{
								resolve(-1)
							}
						}else{
							if(res.data.err&&res.data.err.indexOf('token')!=-1){
								uni.showToast({title: '登录已失效!',icon:'none'})
								setTimeout(()=>{
									proxy.$c.clearToken('token');
									proxy.$c.clearUser('user');
									uni.reLaunch({url: '/pages/login'});
								},1000)
							}
							resolve(-1)
						}
					}else{
						if(res.data.err&&res.data.err.indexOf('token')!=-1){
							uni.showToast({title: '登录已失效!',icon:'none'})
							setTimeout(()=>{
								proxy.$c.clearToken('token');
								proxy.$c.clearUser('user');
								uni.reLaunch({url: '/pages/login'});
							},1000)
						}
						resolve(-1)
					}
		        },
		        fail: (err) => {
		            resolve(-1)
		        },
		    })
		})
	}
	
	const StreamRequest_lava=async(messages,type)=>{
		let messages_ = messages.filter(e=>!e.iserr)
		messages_.map(e=>{
			if(e.recommends&&e.recommends.products){
				delete e.recommends.products
				e.recommends = e.recommends.recommends
			}
		})
	    return new Promise((resolve, reject) => {
	        const response = uni.request({
				url: 'https://silkscreen.server.zhhost.top/mp/chat',//后端java调用
	            method: "POST", // 你的请求方法
	            data: {
					messages: JSON.stringify(messages_),
					type:obj.mod.type,
				},
	            header: {
	                "Content-Type": "application/json;charset=UTF-8;",
					"token": proxy.$c.getToken()
	            },
				dataType: 'json',
	            enableChunked: true, // 开启流传输
	            success: async(res) => {
					//调用结束
					console.log('测试',res,isNaN(res.statusCode));
					if(res.statusCode==200||isNaN(res.statusCode)){
						obj.isChartEnd = 1
						if(type==='recommend'){
							if(obj.mod.recommend){
								const len = obj.messages.length-1
								if(!obj.messages[len].recommends&&obj.recommends!==null){
									obj.messages[len].recommends = (obj.recommends&&obj.recommends!==-1)?obj.recommends:null//灰色区域 推荐内容
									addchat()
									setTimeout(()=>{
										uni.pageScrollTo({selector: '#bottom_space'})
									}, 10);
								}
							}
						}else{
							addchat()
							setTimeout(()=>{
								uni.pageScrollTo({selector: '#bottom_space'})
							}, 10);
						}
					}else{
						obj.isChartEnd = 2
						const len = obj.messages.length-1
						obj.messages[len].content = `生成失败，失败码${res.statusCode}，请稍后再试...`
						obj.messages[len].iserr = true
						obj.messages[len-1].iserr = true
					}
	            },
	            fail: (err) => {
					obj.isChartEnd = 2
					console.log('err2',err);
					const len = obj.messages.length-1
					obj.messages[len].content = '生成失败，请稍后再试...'
					obj.messages[len].iserr = true
					obj.messages[len-1].iserr = true
	            },
	        })
	        // 返回请求的响应
	        resolve(response)
	    })
	}
	
	const ab2strEfficient=(buf)=>{  
		  return Array.from(new Uint8Array(buf), byte => String.fromCharCode(byte)).join('');  
	}
	
	const getchat=async(messages,type)=>{
		try {
			const requestTask = await StreamRequest_lava(messages,type)
			// 成功回调 返回流传输信息 返回arrayBuffer
			requestTask.onChunkReceived((e)=>{
				const chunkText_ = ab2strEfficient(e.data)
				const chunkText = decodeURIComponent(escape(chunkText_));
				// console.log('chunkText',chunkText);
				// 后端pyrhon调用处理
				const str = `[${chunkText.slice(0, -1)}]`
				const d = JSON.parse(str)
				const c = obj.messages[obj.messages.length-1].content||''
				obj.messages[obj.messages.length-1].content = c=='生成中...'?'':c
				obj.messages[obj.messages.length-1].content += d.map(t => t.content).join('')
				setTimeout(()=>{
					uni.pageScrollTo({selector: '#bottom_space'})
				}, 10);
			})
		} catch (err) {
			const len = obj.messages.length-1
			obj.messages[len].content = '生成失败，请稍后再试...'
			obj.messages[len].iserr = true
			obj.messages[len-1].iserr = true
		}
	}
	
	const setchart=async(msg,type)=>{
		type = 'recommend'//暂时设置为 输入框和推荐问题都 启用推荐
		obj.recommends = null
		obj.u = await getuser()
		if([0,1].includes(obj.u.verify)){
			obj.isChartEnd = 0
			const u = {
				"role": "user",
				"content": msg.title
			}
			const chart_u = {
				"role": "user",
				"content": msg.title + (obj.mod.chartrecommend?`,${obj.mod.chartrecommend}`:'')
			}
			const messages = obj.messages.concat([u])
			const messages_ = obj.messages.concat([chart_u])
			getchat(JSON.parse(JSON.stringify(messages_)),type)
			obj.messages = messages.concat([{
				role: 'assistant',
				content: '生成中...',
				recommends: null//灰色区域 推荐内容
			}])
			setTimeout(()=>{
				uni.pageScrollTo({selector: '#bottom_space'})
			}, 10);
			
			if(type==='recommend'&&obj.mod.recommend){
				obj.recommends = await getChartObj_java(obj.mod.recommend)//灰色区域 推荐内容
				const len = obj.messages.length-1
				if(obj.isChartEnd==1&&!obj.messages[len].recommends){
					obj.messages[len].recommends = (obj.recommends&&obj.recommends!==-1)?obj.recommends:null
					addchat()
					setTimeout(()=>{
						uni.pageScrollTo({selector: '#bottom_space'})
					}, 10);
				}
			}
		}else{
			proxy.$c.go_url('/pages/authentication');
		}
	}
	
	const sendRecommend=async(v)=>{
		setchart(v,'recommend')
	}
	
	const sendInut=(msg)=>{
		setchart({title:msg},'chart')
		obj.chatMsg = ''
	}
	
	const changeRecommend=(v)=>{
		if(obj.isChartEnd==0){
			return
		}
		if(obj.mod.type==1){
			sendInut(v.name)
		}else if(obj.mod.type==2){
			proxy.$c.go_url(`/pages/productDetail?id=${v.id}`)
		}else if(obj.mod.type==3){
			sendInut(v.name)
		}
	}
	
	const getLastArrs=(arr,len)=>{  
	  // 计算开始索引，如果数组长度小于5，则开始索引为0  
	  const startIndex = Math.max(arr.length - len, 0);  
	  // 使用slice方法截取数组  
	  return arr.slice(startIndex);  
	} 
	
	const addchat=()=>{
		let messages = obj.messages.filter(e=>!e.iserr)
		if(messages.length){
			const ms = getLastArrs(messages,10)
			// console.log('ms',ms);
			// return
			proxy.$reQuest.post('mp/user/chat/add',{
				messages: JSON.stringify(ms),
				other: '',
				type: obj.mod.type
			},{token: true},).then(res=>{
				if(res.success){
					obj.companys = res.msg.list||[]
				}else{
					obj.companys = []
				}
			}).catch(err=>{obj.companys = []})
		}
	}
	
	
</script>

<style lang="scss" scoped>
	.pagebox{
		width: 750rpx;min-height: 100vh;padding: 0 30rpx;box-sizing: border-box;font-size: 28rpx;overflow: hidden;
		.bg{
			position: fixed;left: 0;top: 0;z-index: -1;
			width: 750rpx;height: 430rpx;
			background: linear-gradient( 180deg, #BCE5F7 0%, #fff 100%);
		}
		.bottombox{
			position: fixed;left: 0;bottom: 0; z-index: 9999999;background: #fff;box-shadow: 0 -10rpx 10rpx 10rpx rgba(0,0,0,0.03);
			// padding: 20rpx 30rpx 20rpx;
			padding-left: 30rpx;padding-right: 30rpx;padding-top: 20rpx;
			box-sizing: border-box;
			.chartbox{
				width: 690rpx;
				.voicebox{
					width: 80rpx;min-width: 80rpx;height: 80rpx;border: 2rpx solid #D9DBE4;border-radius: 76rpx;margin-right: 20rpx;
					.voiceicon{width: 50rpx;height: 50rpx;}
				}
				.inputbox{
					flex: 1;height: 80rpx;border-radius: 80rpx;border: 2rpx solid #D9DBE5;
					padding: 0 0 0 30rpx;box-sizing: border-box;font-size: 28rpx;overflow: hidden;
					input{flex: 1;}
					
					.addiconbox{
						width: 80rpx;height: 80rpx;
						.addicon{width: 40rpx;height: 40rpx;}
					}
				}
				.send{height: 80rpx;border-radius: 80rpx;padding: 0 30rpx;box-sizing: border-box; margin-left: 10rpx;background: #1773E5;display: flex;align-items: center;justify-content: center;font-size: 28rpx;color: #fff;}
			}
			.desc{width: 100%;font-size: 22rpx;color: #999;text-align: right;margin-bottom: 20rpx;margin-top: 10rpx;}
			.modbox{
				.mod{
					width: 25%;margin-bottom: 30rpx;
					.item{
						width: 120rpx;height: 118rpx;background: #FFFFFF;box-shadow: 0rpx 5rpx 13rpx 0rpx #EDEDED;border-radius: 20rpx;margin-bottom: 20rpx;
						image{width: 42rpx;height: 42rpx;}
					}
					.name{font-size: 30rpx;}
				}
			}
		}
		.inputBottom{
			// padding: 20rpx 30rpx constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
			// padding: 20rpx 30rpx env( safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
		}
		
		.lefthead{
			width: 60rpx;height: 60rpx;border-radius: 60rpx;overflow: hidden;margin-bottom: 10rpx;image{width: 60rpx;height: 60rpx;}
		}
		.xiaosi_chart{
			width: 690rpx;height: auto;box-shadow: 0rpx 2rpx 7rpx 0rpx rgba(170,192,224,0.5);border-radius: 0rpx 25rpx 25rpx 25rpx;border: 2rpx solid rgba(255,255,255,0.3);
			padding: 20rpx 30rpx;box-sizing: border-box;margin-bottom: 40rpx;
			background: linear-gradient( 86deg, #E2EEFF 0%, #EAECFF 100%);
			.title{font-size: 33rpx;font-weight: bold;color: #5289E8;margin-bottom: 5rpx;}
			.desc{font-size: 25rpx;color: #999;}
		}
		.recommend{
			position: relative;
			width: 690rpx;height: auto;background: #FFFFFF;box-shadow: 0rpx 4rpx 16rpx 0rpx #DAE3EF;border-radius: 0rpx 25rpx 25rpx 25rpx;
			padding: 20rpx 30rpx;box-sizing: border-box;margin-bottom: 40rpx;
			.re-label{font-size: 32rpx;font-weight: bold;position: relative;z-index: 2;}
			.re-label::before{content: '';display: block;position: absolute;left: 0;bottom: 10rpx;z-index: 1;width: 114rpx;height: 11rpx;background: linear-gradient( 90deg, #3D8BFF 0%, rgba(251,251,251,0) 100%);opacity: 0.75;}
			.refresh{width: 30rpx;height: 30rpx;}
			.problem{padding: 30rpx 0;box-sizing: border-box;font-size: 30rpx;border-bottom: 1rpx solid #F3F3F3;}
			.problem:last-child{border: none;}
			.nodata{width: 100%;padding: 60rpx;box-sizing: border-box;text-align: center;font-size: 22rpx;color: #999;}
		}
		
		.problem_chart{
			width: fit-content;max-width: 690rpx;height: auto;display: inline-flex;background: #1773E5;border-radius: 0rpx 18rpx 18rpx 18rpx;color: #fff;
			padding: 20rpx 30rpx;box-sizing: border-box;margin-bottom: 40rpx;
		}
		.edit{width: 30rpx;}
		.answer_chart{
			width: auto;max-width: 690rpx;height: auto;display: inline-flex;background: linear-gradient( 82deg, #F5F6F8 0%, #F5F6F8 100%);box-shadow: 0rpx 0rpx 9rpx 0rpx #EDF0F5;border-radius: 0rpx 25rpx 25rpx 25rpx;border: 1rpx solid #E1E8F8;
			padding: 20rpx;box-sizing: border-box;margin-bottom: 40rpx;
			.recommends{
				// padding: 20rpx;box-sizing: border-box;background: #ECEDF0;
				border-radius: 10rpx;margin-bottom: 10rpx;
				font-size: 28rpx;
				.recommendDesc{
					color: #999;margin-bottom: 10rpx;
				}
				.name{
					color: #1773E5;
				}
				.proitem{
					background: #fff;border-radius: 10rpx;
					.cover{
						width: 120rpx;height: 120rpx;border-radius: 10rpx;overflow: hidden;background: #f9f9f9;
						image{width: 120rpx;height: 120rpx;}
					}
					.title{font-size: 30rpx;font-weight: bold;margin-bottom: 10rpx;}
					.prodesc{font-size: 24rpx;color: #999;}
					.minidesc{font-size: 22rpx;color: #999;}
					.min_price{font-size: 36rpx;font-weight: bold;color: red;}
					.readbtn{
						width: 108rpx;height: 46rpx;background: #e5f1ff;border-radius: 12rpx;font-size: 22rpx;color: #1773E5;
					}
				}
			}
			.desc{width: 100%;text-align: right;font-size: 22rpx;color: #999;}
		}
	}
</style>
